<template>
	<view class="Editing">
		<statusBar />
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-管理分类-编辑</view>
		</view>
		<view class="search">
			<view class="search_one">
				<view class="Category">
					<view>分类名称</view>
					<input type="text" value="" placeholder="甜度" />
				</view>
				<!-- 分类图标 -->
				<view class="Category">
					<view>分类图标</view>
					<image @tap="upload" :src="zhengmian" mode=""></image>
				</view>

				<view class="Category">
					<view>分类类型</view>
					<view @tap="addType">
						<view>{{typeName}}</view>
						<view><image src="../../static/setup/jiantou2.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分类类型弹出层 -->
		<view class="menu">
			<u-popup v-model="Packup" mode="bottom">
				<view class="Foodsold">
					<view>
						<!-- <view>普通分类</view>
						<view>必点分类</view>
						<view>可单独下单分类</view> -->
						<view v-for="(item,index) in Separate" @tap="add(item.name)" :key="index">{{item.name}}</view>
					</view>
					<view>取消</view>
				</view>
			</u-popup>
		</view>
		<view class="Login">保存</view>
	</view>
</template>
<script>
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			zhengmian: '../../static/setup/xiangji.png',
			Packup:false,
			Separate:[
				{name:"普通分类"},
				{name:"必点分类"},
				{name:"可单独下单分类"}
			],
			typeName:"普通分类"
		};
	},
	components: {
		statusBar
	},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		addType(){
			this.Packup = true
		},
		add(index){
			this.typeName = index
			this.Packup = false
		},
		upload: function() {
			var _this = this;
			uni.chooseImage({
				count: 1,
				quality: 80,
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					console.log(chooseImageRes.tempFiles[0].size);
					_this.zhengmian = tempFilePaths[0];
					// // 2448884
					// if(chooseImageRes.tempFiles[0].size >= 1094377){
					//  toast('超大图片,请于pc端上传认证');
					//  _this.zhengmian = "../../../static/assert/mine/zhengmian@2x.png"
					//  return false
					// }
					// const uploadTask = uni.uploadFile({
					// 	url: 'https://exchangeapi.coinman.club/storage/uploadSingle', //仅为示例，非真实的接口地址
					// 	filePath: tempFilePaths[0],
					// 	name: 'file',
					// 	success: uploadFileRes => {

					// 		if (JSON.parse(uploadFileRes.data).code == 200) {
					// 			toast('上传成功');

					// 			this.front = JSON.parse(uploadFileRes.data).data;
					// 			console.log(this.front, '正面');
					// 			console.log(JSON.parse(uploadFileRes.data).data, 75555);
					// 		} else {
					// 			toast(JSON.parse(uploadFileRes.data).msg);
					// 		}
					// 	},

					// });
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.Editing {
	.nav {
		display: flex;
		align-items: center;
		padding: 50upx 30upx 30upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		padding-bottom: 30upx solid #f5f6f8;
		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.search {
		// 微信小程序
		/* #ifdef  MP-WEIXIN */

		padding-top: 80upx;
		/* #endif */
		// 手机端
		/* #ifdef APP-PLUS */
		padding-top: 80upx;
		/* #endif */
		// H5端
		/* #ifdef  H5 */
		padding-top: 120upx;
		/* #endif */
		.search_one {
			margin-top: 20upx;
			background: #ffffff;
			border-bottom: 1upx solid #edf0fa;
			border-top: 1upx solid #edf0fa;
			.Category {
				width: 92%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				border-bottom: 1upx solid #edf0fa;
				padding: 36upx 0upx 36upx 0upx;
				& > view:nth-child(1) {
					font-size: 32upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				input {
					background: none;
					border: none;
					text-align: right;
				}
				image {
					width: 120upx;
					height: 120upx;
				}
				& > view:nth-child(2) {
					display: flex;
					align-items: center;
					& > view:nth-child(1) {
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-right: 25upx;
					}
					& > view:nth-child(2) {
						image {
							width: 44upx;
							height: 44upx;
							display: flex;
						}
					}
				}
			}
		}
	}
	.menu {
		/deep/.u-drawer-bottom {
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			background: none !important;
		}
		.Foodsold {
			padding-bottom: 20upx;
			& > view:nth-child(1) {
				width: 93%;
				background: $bg1-color;
				border-radius: 10upx;
				margin: 0 auto;
				& > view {
					font-size: 34upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					border-bottom: 1upx solid #edf0fa;
					padding-top: 31upx;
					padding-bottom: 31upx;
					text-align: center;
				}
			}
			& > view:nth-child(2) {
				width: 93%;
				background: $bg1-color;
				border-radius: 10upx;
				margin: 26upx auto;
	
				font-size: 34upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding-top: 30upx;
				padding-bottom: 30upx;
				text-align: center;
			}
		}
	}
	.Login{
			   width: 93%;
			   height:112upx;
			   margin: 0 auto;
			   background:rgba(53,57,76,1);
			   border-radius:56upx;
			   font-size:34upx;
			   font-family:Source Han Sans CN;
			   font-weight:400;
			   color:$bg1-color;
			   margin-top: 73upx;
			   display: flex;
			   align-items: center;
			   justify-content: center;
			   position: fixed;
			   bottom: 30upx;
			   left: 0;
			   right: 0;
			   
	}
}
</style>
